<template>
    <div id="noticeInfo" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div style="box-sizing: border-box;">
                <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true" label-width="auto">
                        <!-- <el-form-item label="关键字:">
                            <el-input v-model="searchOne" style="width:150px;" placeholder="请输入标题、内容" clearable  />
                        </el-form-item> -->
                        <el-form-item :label="$t('7unDMz8lR2FkNiDjr_2I6')">
                            <el-select filterable v-model="searchTwo" :placeholder="$t('rvsZ1YnxCZ8Y6Io9bJ0z')" style="width:120px;">
								<el-option
									v-for="item in typeDictTypeDropDown"
									:key="item.code"
									:label="item.value"
									:value="item.code"
								/>
							</el-select>
                        </el-form-item>
                        <el-form-item style="margin-right: 0">
                            <el-button @click="resetClick" icon="ele-Refresh"> {{ $t('eE3IedvHkKmnppI9FzCa7') }} </el-button>
                            <el-button @click="searchClick" type="primary" icon="ele-Search"> {{ $t('5fM07d4lwWlNvcG51m0ao') }} </el-button>
                            <el-button v-if="$hasPer('noticeInfo:add')" @click="nodeClick('')" icon="ele-Plus" type="primary"> {{ $t('byjccsglzWnFEuusQvL9Z') }} </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;margin-top: 8px;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="hover" style="">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">

                                    <el-table :data="list" class="w-h-100" border style="width: 100%" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                        <el-table-column type="index" :label="$t('mypbV2IeRm6WQyRbsoib')" width="55" align="center" :index="indexMethod" />
                                        <el-table-column prop="title" :label="$t('kv3Wi7k9YSrdh2W4Lew7V')"  align="center" />
                                        <el-table-column :label="$t('dWex5GOaZyYi9XnwjrxeE')" align="center">
                                            <template #default="scope">
                                                <span v-for="item in typeDictTypeDropDown" :key="item.code">
                                                    {{ Number(item.code) === Number(scope.row.type) ? item.value : '' }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="$t('wOvw3E6NpPkVFlLohVi8H')" align="center">
                                            <template #default="scope">
                                                <span v-for="item in statusDictTypeDropDown" :key="item.code">
                                                    {{ Number(item.code) === Number(scope.row.status) ? item.value : '' }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column :label="$t('zKDqLt0KBzwdoJgiQgoj')" align="center" >
                                            <template #default="scope">

                                                <el-button v-if="$hasPer('noticeInfo:view')" @click="lookClick(scope.row)" class="icon-e" icon="ele-View" size="small" text type="primary"> {{ $t('w_53isrfamxoT1wPmmZyS') }} </el-button>
                                                
                                                <template v-if="Number(scope.row.status) === 0">
                                                    <el-button v-if="$hasPer('noticeInfo:edit')" @click="nodeClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> {{ $t('pAtGxrCkRSpku0DwjGyEk') }} </el-button>
                                                    <el-popconfirm
                                                        confirm-button-text="确认"
                                                        cancel-button-text="取消"
                                                        icon="InfoFilled"
                                                        icon-color="#626AEF"
                                                        :title="$t('wbtFzqJqbMdEthvMjAbD')"
                                                        @confirm="deleteHandle( 0 , scope.row.id , getData )"
                                                    >
                                                        <template #reference>
                                                            <el-button v-if="$hasPer('noticeInfo:release')" class="icon-e" icon="ele-Promotion" size="small" text type="success"> {{ $t('ko2VmWplDWvbSs86NFePm') }} </el-button>
                                                        </template>
                                                    </el-popconfirm>
                                                </template>

                                                <template v-if="Number(scope.row.status) === 1">
                                                    <el-popconfirm
                                                        confirm-button-text="确认"
                                                        cancel-button-text="取消"
                                                        icon="InfoFilled"
                                                        icon-color="#626AEF"
                                                        :title="$t('ekzNbeeOkks4RTyyHb5mO')"
                                                        @confirm="deleteHandle( 1, scope.row.id , getData )"
                                                    >
                                                        <template #reference>
                                                            <el-button v-if="$hasPer('noticeInfo:withdraw')" class="icon-e" icon="ele-Connection" size="small" text type="warning"> {{ $t('8xSmdQsm9y6fQxobQr') }} </el-button>
                                                        </template>
                                                    </el-popconfirm>
                                                </template>

                                                <template v-if="Number(scope.row.status) === 2">
                                                    <el-popconfirm
                                                        confirm-button-text="确认"
                                                        cancel-button-text="取消"
                                                        icon="InfoFilled"
                                                        icon-color="#626AEF"
                                                        :title="$t('gmpuRIcPgIme5jiw2k71M')"
                                                        @confirm="deleteHandle( 2, scope.row.id , getData )"
                                                    >
                                                        <template #reference>
                                                            <el-button v-if="$hasPer('noticeInfo:del')" class="icon-e" icon="ele-Delete" size="small" text type="danger"> {{ $t('ko8YfTozEhXs5Fu8Vn9c') }} </el-button>
                                                        </template>
                                                    </el-popconfirm>
                                                </template>

                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <AddEditNoticeInfo
            :repairInfo="repairInfo"
            :typeDictTypeDropDown="typeDictTypeDropDown"
            :isUseDialog="isUseDialog"
            @updateData="getData"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
        <LookNoticeInfo
            :lookInfo="lookInfo"
            :typeDictTypeDropDown="typeDictTypeDropDown"
            :isLookDialog="isLookDialog"
            @cancelLookClick="cancelLookClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , toRaw , reactive } from 'vue'
import getTableData from '/@/utils/getTableData'
import { sysNoticePage , sysNoticeDelete , sysDictTypeDropDown , sysNoticeChangeStatus } from '/@/api/manage/manage.ts'
import AddEditNoticeInfo from './component/add-edit-noticeInfo.vue'
import LookNoticeInfo from './component/look-noticeInfo.vue'
export default defineComponent( {
    name: 'noticeInfo',
    components: {
        AddEditNoticeInfo,
        LookNoticeInfo,
    },
    setup(props){
        const isUseDialog = ref() // 新增/编辑弹出框隐藏/显示
        const repairInfo = ref() // 传递子组件数据
        const statusDictTypeDropDown = ref() // 0草稿 1发布 2撤回 3删除
        const typeDictTypeDropDown = ref()// 0通知 1公告
        const isLookDialog = ref() // 查看
        const lookInfo = ref() // 查看的数据
        const searchOne = ref()
        const searchTwo = ref()
        const searchObj = reactive({ })
        /*** searchClick 查询按钮 */
        const searchClick = () => {
            if(searchOne.value !== undefined){ Object.assign(searchObj,{searchValue: searchOne.value}) }
            if(searchTwo.value !== undefined){ Object.assign(searchObj,{type: Number(searchTwo.value)}) }
        }

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            searchOne.value = ''
            searchTwo.value = ''
            // Object.assign(searchObj,{ searchValue : '' })
            Object.assign(searchObj,{ type : '' })
        }

        /*** lookClick 查看按钮点击事件 */
        const lookClick = (val: any) => {
            lookInfo.value = JSON.stringify(toRaw(val))
            isLookDialog.value = true
        }

        /***  */

        /*** nodeClick 新增/编辑点击事件 */
        const nodeClick = (val:string | object) => {
            val !== '' ? repairInfo.value = JSON.stringify(toRaw(val)) : repairInfo.value = ''
            isUseDialog.value = true
        }

        /*** deleteHandle 删除数据事件 */
        const deleteHandle = async (num:number , val: String | Number , updateFun: Function) => {
            if(num === 0){
                console.log(val,'发布按钮')
                ChangeStatus(val,1,updateFun)
            }else if(num === 1){
                console.log(val,'撤回按钮')
                ChangeStatus(val,2,updateFun)
            }else{
                let param = {id : val}
                try {
                    let res = await sysNoticeDelete(param)
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            }
        }

        /*** ChangeStatus 改变状态 */
        const ChangeStatus = async (val: any , status: any , updateFun: Function) => {
            let param = { id : val , status: status }
                try {
                    let res = await sysNoticeChangeStatus(param)
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
        }

        /*** GetSqlDic 获取数据库字典数据 */
        const GetSqlDic = () => {
            let setArr = ['notice_status','notice_type']
            try {
                setArr.forEach(async item => {
                    console.log(item,'item')
                    let res: { data: any } = await sysDictTypeDropDown({ code: item })
                    if(item === 'notice_status'){ statusDictTypeDropDown.value = res.data }
                    if(item === 'notice_type'){ typeDictTypeDropDown.value = res.data }
                    console.log(res.data,item,'数据库字典数据')
                })
            } catch (err) {}


        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false
        }

        /*** cancelLookClick 查看关闭事件 */
        const cancelLookClick = () => {
            isLookDialog.value = false
        }

        /*** controlUseClick 提交事件 */
        const controlUseClick = () => {
            isUseDialog.value = false
        }

        onMounted(() => {
            GetSqlDic()
        })

        return {
            ...getTableData(sysNoticePage,{},searchObj),
            isUseDialog,
            cancelUseClick,
            controlUseClick,
            nodeClick,
            repairInfo,
            deleteHandle,
            statusDictTypeDropDown, // 如：草稿、发布、撤回、删除
            typeDictTypeDropDown, // 如：通知、公告
            lookClick,
            cancelLookClick,
            isLookDialog,
            lookInfo,

            searchOne,
            searchTwo,
            searchObj,
            searchClick,
            resetClick,
        }
    },
} )
</script>
<style scoped lang="scss">
    #noticeInfo {
        .box-f{
            :deep(.el-form-item__label){
                // padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
    }
</style>